<template>
  <div class="login-container">
    <div class="login-back"></div>
    <div class="login-form">
      <div class="login-title">
        <h1>后台管理系统</h1>
      </div>
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        status-icon
        :rules="loginRules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户编号" prop="userNum">
          <el-input 
            ref="usernoRef"
            v-model="loginForm.userNum" 
            type="text" 
            tabindex="1"
            :prefix-icon="User"
            autocomplete="off" />
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input 
            ref="passwordRef"
            v-model="loginForm.password" 
            type="password" 
            tabindex="2"
            @keyup.enter="handlerLogin"
            :prefix-icon="Lock"
            autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button
            :loading="loading"
            type="primary" 
            @click="handlerLogin"
            >登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div> 
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import {useRouter} from 'vue-router'
  import { User,Lock } from '@element-plus/icons-vue'
  import {UserModule} from '@/store/modules/user'

  const router = useRouter()
  const loginFormRef = ref(null)

  const checkUserno = (rule: any, value: any, callback: any) => {
    if (!value) {
      callback(new Error('请输入用户编号'))
    }else{
      callback()
    }
  }

  const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
      callback(new Error('请输入密码'))
    }else{
      callback()
    }
  }
  
  const loginForm = reactive({
    userNum: '',
    password: '',
  })

  const loginRules = reactive({
    userNum: [{ validator: checkUserno, trigger: 'blur' }],
    password: [{ validator: validatePass, trigger: 'blur' }],
  })

  const loading = ref(false);
  
  const handlerLogin = ()=> {
    console.log("loginForm.userNum:  "+loginForm.userNum);
    console.log("loginForm.password:   "+loginForm.password);
    
    
    (loginFormRef.value as any).validate(async(valid: boolean) => {
      if(valid){
        loading.value = true;
        try {
          await UserModule.Login(loginForm)
            if(UserModule.token){
              router.push({
              path:'/'
            })
            setTimeout(() => {
              loading.value = false;
                }, 0.5 * 1000)
          }
        } catch (error) {
          loginForm.userNum =''
          loginForm.password =''
          console.log(111);
          
        }
        loading.value = false;
      }else{
        return false;
      }
    })
  }

</script>

<style lang="scss">
  .login-container {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .login-back{
      height: 99%;
      width: 99%;
      background-color:rgb(102, 133, 85);
      position: absolute;
      z-index: -1;
      overflow: hidden;
    }

    .login-form{
      text-align: center;
      width: 500px;
      height: 300px;
      margin: 200px auto;
      background-color: aliceblue;
      padding: 50px 20px;
    }

    .login-title{
      margin:20px 0 30px 0;
    }
  }
  
</style>

